<!--
 * @Author: wuyuxin
 * @Date: 2024-07-01 16:14:47
 * @LastEditors: wuyuxin
 * @LastEditTime: 2024-07-01 23:03:56
 * @Description:
-->
<template>
  <div class="header-crumb">
    <el-breadcrumb separator-icon="CaretRight">
      <template v-for="breadItem in breadCrumb" :key="breadItem.id">
        <el-breadcrumb-item :to="{ path: breadItem.path }">{{
          breadItem.name
        }}</el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import useLoginStore from '@/store/login/login'
import { mapPathToBreadcrumbs } from '@/utils/map-menus'
import { useRoute } from 'vue-router'

const route = useRoute()
const userMenu = useLoginStore().userMenus
console.log(route)
const breadCrumb = computed(() => {
  const result = mapPathToBreadcrumbs(route.path, userMenu)
  return result
})
console.log(breadCrumb, '=====')
</script>

<style scoped lang="less"></style>
